<template>
    <div class="page-child-main see-doctor3">
        <a-spin :class="loading&&'null-spin'" tip="Loading..." :spinning="loading">
            <div></div>
        </a-spin>
        <div class="page-title">就诊人数门店排行</div>
        <div id="seeDoctorChart3">
            <div class="line-box" v-for="item in dataList" :key="item.id">
                <div class="line-name">{{item.name}}</div>
                <div class="line-bg">
                    <div class="line-width" :style="'width:'+item.width+'%'"></div>
                </div>
                <div class="line-info">{{item.val}}人</div>
                <div class="line-tips">就诊人数</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { toDecimalNoZero } from "@/utils";
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    loading = false;
    chart: any = null;
    maxData = 0;
    dataList: any[] = [];
    async mounted() {
        await this.getData();
        let max = 0;
        this.dataList.forEach((item) => {
            let val = item.val;
            if (val > max) max = val;
        });
        max = max + max / 10;
        this.dataList = this.dataList.map((item) => {
            return {
                ...item,
                width: toDecimalNoZero((item.val / max) * 100),
            };
        });
        this.maxData = max;
    }

    async getData() {
        this.loading = true;
        try {
            const res = await api.getVisitRankingByStore();
            const data: any[] = [];
            for (let i in res.data) {
                data.push({ name: i, val: res.data[i] });
            }
            data.sort((a, b) => {
                return b.val - a.val;
            });
            this.dataList = data;
        } finally {
            this.loading = false;
        }
    }
}
</script>
<style lang="scss">
.see-doctor3 {
    height: 49%;
    #seeDoctorChart3 {
        margin-top: 20px;
        width: 100%;
    }
    .line-box {
        display: flex;
        align-items: center;
        padding: 10px 0;
    }
    .line-name {
        font-size: 14px;
        color: #383838;
        font-weight: bold;
        margin-right: 10px;
    }
    .line-bg {
        flex-grow: 1;
    }
    .line-width {
        height: 16px;
        background-color: #4469f1;
        border-radius: 4px;
    }
    .line-info {
        font-size: 15px;
        color: #222222;
        font-weight: bold;
        margin-right: 10px;
    }
    .line-tips {
        font-size: 12px;
        color: #6d6d6d;
    }
}
</style>
